<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- 站号选择 -->
      <el-select v-model="listQuery.stationNumber" :placeholder="$t('equipment.stationNumber')" class="filter-item" clearable="" style="width: 200px">
        <el-option v-for="station in stationOptions" :key="station.stationName" :label="station.stationName" :value="station.stationNumber" />
      </el-select>
      <!-- 时间选择 -->
      <el-date-picker
        v-model="listQuery.startTime"
        class="filter-item"
        type="date"
        :placeholder="$t('common.chooseDate')"
      />
      <el-button v-waves class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="handleFilter">
        {{ $t('common.search') }}
      </el-button>
      <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
        {{ $t('common.export') }}
      </el-button>
    </div>
    <div class="paddingmore">
      <div class="tooltitlebox">
        <div class="flex">
          <div class="tooltitle color1" />
          <span>{{ $t('equipment.PlcOn') }}</span>
        </div>
        <div class="flex">
          <div class="tooltitle color2" />
          <span>{{ $t('equipment.PlcAlarm') }}</span>
        </div>
        <div class="flex">
          <div class="tooltitle color3" />
          <span>{{ $t('equipment.PlcWork') }}</span>
        </div>
        <div class="flex">
          <div class="tooltitle color4" />
          <span>{{ $t('equipment.PlcOff') }}</span>
        </div>
      </div>
    </div>
    <!-- 主界面tabel数据 -->
    <el-table
      ref="dragTable"
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      :header-row-style="{color: 'black'}"
      :header-cell-style="{background: 'lightBlue'}"
      border
      fit
      row-key="id"
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column :label="$t('equipment.stationName')" width="220PX" align="center">
        <template slot-scope="{row}">
          <span>{{ row.station.stationName }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('equipment.bootTime')" width="140px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.timePlcOn }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('equipment.downTime')" width="140px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.timePlcOff }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('equipment.workTime')" width="150px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.timeProduce }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('equipment.faultTime')" width="140px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.timeAlarm }}</span>
        </template>
      </el-table-column>
      <el-table-column width="520" align="center">
        <template slot="header">
          <div class="coordinate">
            <div class="dotuline">0am</div>
            <div class="dotuline">3am</div>
            <div class="dotuline">6am</div>
            <div class="dotuline">9am</div>
            <div class="dotuline">12am</div>
            <div class="dotuline">3pm</div>
            <div class="dotuline">6pm</div>
            <div class="dotuline">9pm</div>
            <div class="dotuline">0pm</div>
          </div>
        </template>
        <template slot-scope="scope">
          <div class="wrap">
            <div
              v-for="(item, index) in scope.row.timeFragment"
              :key="index"
              :style="{width:item.widths + 'px',background:item.color,height:'20px'}"
            />
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

<script>
import { getAlarms, getStationListEx } from '@/api/equipment'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
import i18n from '@/lang'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'EquipmentStatistics',
  components: {
    Pagination
  },
  directives: { waves },
  data() {
    return {
      tableKey: 0,
      list: [],
      dateArr: [],
      stationOptions: [],
      // 任务u状态
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 20,
        state: 0,
        lineNumber: '',
        stationNumber: '',
        alarmType: '',
        startTime: parseTime(Date.now(), '{y}-{m}-{d}'),
        endTime: '',
        sort: '+processNumber'
      },
      temp: {
        alarmId: '',
        lineNumber: '',
        stationNumber: '',
        alarmType: '',
        message: '',
        status: 0,
        remark: '',
        creatTime: ''
      },
      downloadLoading: false,
      alarmList: [],
      searchDialogFormVisible: {
        director: false
      }
    }
  },
  created() {
    this.listQuery.lineNumber = this.$store.getters.lineNumber
    this.getStationOptions()
    this.getList()
  },
  methods: {
    // 获取工艺流程选项
    getStationOptions() {
      this.listLoading = true
      this.stationOptions = []
      getStationListEx(this.listQuery).then(response => {
        this.stationOptions = response.data.stations
        this.listLoading = false
      })
    },
    // 判断线体ID是否为空
    isEmptyLineId: function() {
      var ret = (this.listQuery.lineNumber === undefined || this.listQuery.lineNumber === '')
      if (ret) {
        this.$notify({
          title: this.$i18n.t('common.tip'),
          message: i18n.t('msg.NO_LINE_SELECTED'),
          type: 'success',
          duration: 2000
        })
      }
      return ret
    },
    // 获取清单
    getList() {
      if (this.isEmptyLineId() === false) {
        this.listLoading = true
        getAlarms(this.listQuery).then(response => {
          this.list = response.data.processStatuses
          this.list.forEach(item => {
            const detal = 450 / 1440
            item.timeFragment.unshift({ color: '#ccc', creatTime: new Date(this.listQuery.startTime).getTime() })
            item.timeFragment.push({ creatTime: new Date(this.listQuery.startTime).getTime() + 86400000 })
            item.timeFragment.map(items => {
              items.color = items.eventId === 3 || items.eventId === 11 ? 'blue' : items.eventId === 1 ? 'red' : items.eventId >= 5 && items.eventId <= 7 ? 'green' : items.eventId === 4 ? 'orange' : '#ccc'
              items.creatTime = new Date(items.creatTime).getTime()
            })
            for (var i = item.timeFragment.length - 1; i >= 1; i--) {
              item.timeFragment[i - 1].time = Math.floor((item.timeFragment[i].creatTime - item.timeFragment[i - 1].creatTime) / 60000)
            }
            item.timeFragment.map(d => {
              d.widths = Math.floor(detal * d.time)
            })
          })
          this.total = response.data.total
        })
        this.listLoading = false
      }
    },
    // 点击搜索时获取清单
    handleFilter() {
      if (this.dateArr.length) {
        this.listQuery.startTime = this.dateArr[0]
        this.listQuery.endTime = this.dateArr[1]
      }
      this.listQuery.page = 1
      this.getList()
    },
    // 下载所有导出信息
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = [
          i18n.t('equipment.stationName'),
          i18n.t('equipment.bootTime'),
          i18n.t('equipment.downTime'),
          i18n.t('equipment.workTime'),
          i18n.t('equipment.faultTime')
        ]
        const filterVal = ['station.stationName', 'timePlcOn', 'timePlcOff', 'timeProduce', 'timeAlarm']
        const data = this.formatJson(filterVal)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '设备状态统计' + parseTime(Date.now(), '{y}{m}{d}{h}{i}{s}')
        })
        this.downloadLoading = false
      })
    },
    // 过滤相关信息
    formatJson(filterVal) {
      return this.list.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    }
  }
}
</script>
<style lang="scss" scoped>
  .coordinate{
    display:flex;
    overflow: hidden;
    margin: 0 10px;
    justify-content: space-between;
  }
  .dotuline{
            position: relative;
        }
 .dotuline:after {
            content: '';
            position: absolute;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background-color: rgb(110, 117, 47);
            bottom: -4px;
            left: 50%;
            transform: translate(0,-50%);
            /*margin: auto;*/
            margin-left: -2px;
        }
.dashboard-editor-container {
  padding: 32px;
  height: 800px;
  background-color: white;
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px x0;
    //margin-bottom: 32px;
  }
}
.wrap {
		width: 500px;
		display: flex;
		padding: 12px 25px;
		border-radius: 20%;
	}
  .tooltitle {
		width: 30px;
		height: 20px;
		margin-right: 5px;
	}

	.color1 {
		background-color: blue;
	}

	.color2 {
		background-color: red;
	}

	.color3 {
		background-color: green;
	}

	.color4 {
		background-color: orange;
	}

	.color5 {
		background-color: #ccc;
	}

	.tooltitlebox {
		display: flex;
		width: 35vw;
		justify-content: space-around;
	}

	.paddingmore {
		padding: 20px 0px;
	}

	.flex {
		display: flex;
	}
@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
